﻿
@{
    ViewBag.Title = "Employees";
}

<br />

<div id="master">
    <form class="form-inline" style="margin-left:8px">
        <div class="form-group" style="margin-right:20px">
            <label class="control-label">Name&nbsp;</label>
            <input name="Name" class="form-control" />
        </div>
        <div class="form-group" style="margin-right:20px">
            <label class="control-label">Gender&nbsp;</label>
            <select data-name="genders" data-empty-html="&nbsp;All" name="Gender" class="form-control">
                <option value="{{Id}}">&nbsp;{{Name}}&nbsp;&nbsp;</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">Tel / Mobile / Email&nbsp;</label>
            <input name="Contact" class="form-control" />
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-info"
                    data-plugin="filterer"
                    data-value-elements="Name,Gender,Contact">
                <i class="glyphicon glyphicon-search"></i>&nbsp;Query
            </button>
        </div>
    </form>

    <br />

    <div class="pull-right">
        <button id="create" class="btn btn-primary"><i class="glyphicon glyphicon-new-window"></i>&nbsp;Create</button>
        <button id="edit" class="btn btn-primary"><i class="glyphicon glyphicon-edit"></i>&nbsp;Edit</button>
        <button id="delete" class="btn btn-primary"><i class="glyphicon glyphicon-remove"></i>&nbsp;Delete</button>
        <button id="details" class="btn btn-primary"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;Details</button>
    </div>

    <div style="clear:both"></div>

    <input name="header" id="header" type="hidden" value="0" />
    <input name="updown" id="updown" type="hidden" value="1" />
    <table style="margin-top:2px" class="table table-bordered table-condensed table-hover">
        <thead data-plugin="tableHeadSorter" data-header-element="header" data-updown-element="updown">
            <tr>
                <th><input type="checkbox" /></th>
                <th class="sort-both" data-header="1">Name</th>
                <th class="sort-both" data-header="2">Gender</th>
                <th class="sort-both" data-header="3">Birthdate</th>
                <th class="sort-both" data-header="4">Tel</th>
                <th class="sort-both" data-header="5">Mobile</th>
                <th class="sort-both" data-header="6">Email</th>
            </tr>
        </thead>
        <tbody data-plugin="renderer" class="invisible">
            <tr>
                <td><input type="checkbox" /></td>
                <td>{{Name}}</td>
                <td>{{GenderName}}</td>
                <td>{{Birthdate}}</td>
                <td>{{Tel}}</td>
                <td>{{Mobile}}</td>
                <td>{{Email}}</td>
            </tr>
        </tbody>
    </table>
    <hr style="margin-top: 0px; padding-top: 0px; border-top: 2px solid #dddddd" />

    <span data-plugin="paginationInfo" style="margin-right: 32px; margin-top: 8px; float: left" data-html="{{itemCount}} results"></span>

    <ul data-plugin="pagination" style="display: inline" class="pagination"></ul>

    <label style="margin-left: 16px">To</label>
    <input id="paginationGoValue" class="form-control input-sm" type="number" min="1" max="50" style="padding: 0px; padding-left: 4px; height: 28px; width: 42px; display: inline" />
    <button data-plugin="paginationGo" style="margin-bottom: 0px" class="btn btn-info btn-sm" type="button"
            data-value-element="paginationGoValue">
        Go
    </button>

    <div class="pull-right">
        <label>Size</label>
        <select data-plugin="pageSizer" name="pageSize" class="form-control input-sm" style="padding-left: 10px; padding-right: 2px; width: 60px; display: inline-block">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
        </select>
    </div>
</div>

<br /><br /><br /><br />

<div id="users">
    <label>&nbsp;Users:</label>
    <div class="pull-right">
        <a href=""><i class="glyphicon glyphicon-new-window"></i>&nbsp;Create</a>
        <a href=""><i class="glyphicon glyphicon-edit"></i>&nbsp;Edit</a>
        <a href=""><i class="glyphicon glyphicon-remove"></i>&nbsp;Delete</a>
        <a href=""><i class="glyphicon glyphicon-list-alt"></i>&nbsp;Details</a>
    </div>

    <table class="table table-bordered table-condensed table-striped">
        <thead>
            <tr>
                <th><input type="checkbox" /></th>
                <th>User name</th>
                <th>IsDisabled</th>
                <th>IsLockedOut</th>
            </tr>
        </thead>
        <tbody data-name="users" data-plugin="renderer" class="invisible">
            <tr>
                <td><input type="checkbox" /></td>
                <td>{{UserName}}</td>
                <td>{{IsDisabled}}</td>
                <td>{{IsLockedOut}}</td>
            </tr>
        </tbody>
    </table>
</div>

@section scripts
{
    <script>
        $(document).ready(function () {
            $('select[data-name]').initializer();

            $('#master').querier("query");

            // Creator

            // Editor

            // ?Delete
        });
    </script>
}
